<template>
  <!-- 筛选条件 -->
  <div class="condition" v-if="isShowDeviceList && permissions">
    <el-form :inline="true" :model="searchForm" :size="'large'">
      <el-row :gutter="22">
        <el-col :span="5">
          <el-input
            v-model="searchForm.keyword"
            :placeholder="t(`module.table.Keyword`)"
            class="input-with-select"
          >
            <template #append>
              <el-button @click="searchFunc" :icon="Search"></el-button>
            </template>
          </el-input>
        </el-col>
        <el-col :span="7">
          <el-date-picker
              v-model="searchForm.dateRange"
              type="daterange"
              range-separator="To"
              start-placeholder="Start date"
              end-placeholder="End date"
              value-format="YYYY-MM-DD 00:00:00"
              size="large"
              @change="changeDate"
            ></el-date-picker>
        </el-col>
        <el-col :span="12">
          <div class="btn_box">
            <el-button
              :disabled="!permissions.includes(4)"
              type="primary"
              @click="add"
              >{{ t(`module.table.AddDevice`) }}</el-button
            >
          </div>
          <div class="btn_box">
            <el-dropdown>
              <el-button type="primary">
                {{ t(`module.table.BatchHandle`)
                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu style="padding: 10px">
                  <el-button type="primary" @click="activeAll">{{
                    t(`module.table.ActiveLicense`)
                  }}</el-button>
                </el-dropdown-menu>
                <el-dropdown-menu style="padding: 10px">
                  <el-popconfirm
                    @confirm="delAll"
                    title="Are you sure to delete selected hosts?"
                  >
                    <template #reference>
                      <el-button
                        :disabled="!permissions.includes(6)"
                        type="warning"
                        >{{ t(`module.table.DeleteHosts`) }}</el-button
                      >
                    </template>
                  </el-popconfirm>
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
          <div class="btn_box">
            <el-dropdown>
              <el-button type="primary">
                {{ t(`module.table.More`)
                }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
              </el-button>
              <template #dropdown>
                <el-dropdown-menu style="padding: 10px">
                  <el-upload
                    ref="uploadRef"
                    class="upload-demo"
                    :action="uploadUrl"
                    :headers="headerObj"
                    :show-file-list="false"
                    :auto-upload="true"
                    :on-success="importSuccess"
                    :limit="1"
                    :file-list="fileList"
                  >
                    <template #trigger>
                      <el-button
                        style="width: 140px"
                        :disabled="!permissions.includes(4)"
                        type="primary"
                        >{{ t(`module.table.ImportDevices`) }}</el-button
                      >
                    </template>
                  </el-upload>
                </el-dropdown-menu>
                <el-dropdown-menu style="padding: 10px">
                  <el-button
                    style="width: 140px"
                    type="primary"
                    @click="downloadTemplate"
                    >{{ t(`module.table.DownloadTemplate`) }}</el-button
                  >
                </el-dropdown-menu>
              </template>
            </el-dropdown>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="22" class="flex_start">
        <div style="position:absolute;margin-left:10px;">Top levels: </div>
        <el-col :span="3">
          <arrow-left
            v-if="filterPage > 1"
            @click="prevFilter"
            style="height: 7vh; cursor: pointer"
          />
        </el-col>
        <el-col :span="17">
          
        <el-breadcrumb separator=">">
          <el-breadcrumb-item
            v-for="(item, index) in selectedFilters"
            class="mb-5"
            :key="index">
            <el-button :type="item.selected ? `primary` : `default`"  @click="selectFilter(item, index)" >
              {{ item.name }}
            </el-button >
          </el-breadcrumb-item>
        </el-breadcrumb>
        </el-col>
      </el-row>
      <!-- 中间对齐 -->
      <div class="flex_start"   style="margin-bottom: 20px">
        <div class="pb-10">Sublevels: </div>
        <el-row :gutter="10" class="filter_box pb-10" v-show="filterTotal > 0">
          <el-col :span="2">
            <arrow-left
              v-if="filterPage > 1"
              @click="prevFilter"
              style="height: 7vh; cursor: pointer"
            />
          </el-col>
          <el-col :span="4" v-for="(item, index) in filterList" :key="index">
            <el-card
              :class="`card-${index + 1}`"
              style="text-align: center; cursor: pointer"
              shadow="hover"
              @click="selectFilter(item)"
            >
              {{ item.name }}
            </el-card>
          </el-col>
          <el-col :span="2" style="text-align: right">
            <arrow-right
              v-if="lastPage != filterPage"
              @click="nextFilter"
              style="height: 7vh; cursor: pointer"
            />
          </el-col>
        </el-row>
      </div>
    </el-form>
  </div>

  <!-- 表单数据 -->
  <div class="data_table" :style="{height: filterList && filterList.length == 0 ? '50vh' : '43vh', 'margin-top': filterList && filterList.length == 0 ? '3vh' : '0'}" v-if="isShowDeviceList && permissions">
    <div class="row header flex_start">
      <div class="width_40">
        <el-checkbox v-model="selectAll" size="large" />
      </div>
      <div class="width_40"></div>
      <div class="width_200" v-for="item in haderList" :key="item.field" :class="item.field">
        {{item.label}}
      </div>
      <div class="width_320">
        <p class="font">Handle</p>
      </div>
    </div>
    <!-- 数据展示 -->
    <div class="data_box" v-for="(device, i) in deviceList" :key="device.id">
      <!-- 主机列表 -->
      <div class="row data_list flex_start" style="margin-bottom: 20px;">
        <div class="width_40">
          <el-checkbox v-model="deviceList[i].checked"  @change="checkedDataprocessing"></el-checkbox >
        </div>
        <!-- 展示/收起子设备列表 -->
        <div class="width_40">
          <div v-if="device.child_device_list.length >= 1">
            <el-icon v-if="showChileDeviceId == device.id" @click.stop="handleHideChileDevice() "><ArrowDown /></el-icon>
            <el-icon v-else @click.stop="handleShowChileDevice(device.id)"><ArrowRight/></el-icon>
          </div>
        </div>
        <!-- 设备字段 -->
        <div class="width_200" v-for="(item) in haderList" :key="item.id" :class="item.field">
          <span v-if="item.field  == 'status'">
            {{device[item.field] == -1 ? t(`module.table.Offline`) : device[item.field] == 1 ? t(`module.table.Online`) : t(`module.table.Unknown`)}}
          </span>
          <!-- 地址处理 -->
          <span v-else-if="item.field == 'address'" style="cursor: pointer; color: #2440b3" @click="bindAddress(device)" >
            {{ device.lng == "" ? "Bind Address" : device.address }}
          </span >
          <span v-else>{{device[item.field]}}</span>
        </div>
        <!-- 主机操作 -->
        <div class="width_320 flex_start" style="padding: 3px 10px;">
          <!-- 编辑 -->
          <el-button type="primary" @click="edit(device)">{{ t(`module.table.Edit`) }}</el-button>
          <!-- 删除 -->
          <el-popconfirm @confirm="del(device.id)" title="Are you sure to delete this host?" >
            <template #reference>
              <el-button type="warning">{{
                t(`module.table.Delete`)
              }}</el-button>
            </template>
          </el-popconfirm>
          <!-- 更多操作 -->
          <el-dropdown style="margin-left: 10px;">
            <el-button type="primary">
              {{ t(`module.table.More`)
              }}<el-icon class="el-icon--right"><arrow-down /></el-icon>
            </el-button>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-if="device.license_active == 0" >
                  <el-button
                    type="primary"
                    :disabled="device.can_active == 0"
                    @click="active(device.id)"
                    >{{ t(`module.table.ActiveLicense`) }}</el-button
                  ></el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    type="primary"
                    @click="shareToOthers(device.id)"
                    >{{ t(`module.table.shareToOthers`) }}
                  </el-button>
                </el-dropdown-item>
                <el-dropdown-item>
                  <el-button
                    type="primary"
                    @click="transferToOthers(device.id)"
                    >{{ t(`module.table.transferToOthers`) }}
                  </el-button>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </div>
      <!-- 主机绑定设备 -->
      <block v-if="device.child_device_list.length >= 1 && showChildDeviceList == true && showChileDeviceId == device.id">
        <div class="row flex_start child_list" v-for="(item, index) in device.child_device_list" :key="index">
          <div class="ml_40"> </div>
          <div class="width_40"> </div>
          <div class="width_200" v-for="i in haderList" :key="i.id" :class="i.field">
            <span v-if="i.field  == 'sn' || i.field == 'address'">{{device[i.field]}}</span>
            <span v-else-if="i.field  == 'status'">
              {{item[i.field] == 0 ? t(`module.table.Offline`) : item[i.field] == 1 ? t(`module.table.Online`) : t(`module.table.Unknown`)}}
            </span>
            <span v-else>{{item[i.field]}}</span>
          </div>
          <!-- 主机操作 -->
          <div class="width_320 flex_start" style="padding: 3px 10px;padding-bottom: 5px;">

          </div>
        </div>
      </block>
    </div>
  </div>

  <el-row :gutter="20" class="mt-20">
    <el-col :span="10" :offset="10">
      <el-pagination
        small
        background
        layout="prev, pager, next"
        :total="total"
        class="mt-4"
        :current-page="searchForm.page"
        @current-change="changePage"
      >
      </el-pagination>
    </el-col>
  </el-row>

  <!-- 绑定地址弹窗 -->
  <bind-address-dialog v-if="dialogMapVisible" :dialogMapVisible="dialogMapVisible" :addressData="bindAddressForm" @bindAddressSuccess="bindAddressSuccess" 
    @cancelBindAddress="cancelBindAddress"
  ></bind-address-dialog>

  <!-- 编辑/添加设备 -->
  <edit-equipment-detail-dialog  v-if="dialogFormVisible" :dialogFormVisible="dialogFormVisible"
    :formData="form" :organizationList="organizationList" :areaList="areaList" :zoneList="zoneList"
    @cancel="cancel" @submitDetail="submitDetail"
  ></edit-equipment-detail-dialog>

  <alarm-message
    v-if="isShowDeviceList == false"
    @backToDeviceList="backToDeviceList"
  ></alarm-message>
</template>

<script>
import { reactive, toRefs, onMounted, watch } from "vue";
import { useI18n } from "vue-i18n";
import { Search } from "@element-plus/icons-vue";
import SensorDialog from "@/components/Device/sensors.vue";
import AlarmMessage from "@/components/Device/alarmMessage.vue";
import BindAddressDialog from "./components/BindAddressDialog.vue";
import EditEquipmentDetailDialog from "./components/EditEquipmentDetailDialog.vue";
import { ElMessage } from "element-plus";

import API from "api";
export default {
  name: "Equipment-List",
  components: {
    SensorDialog,
    AlarmMessage,
    BindAddressDialog,
    EditEquipmentDetailDialog
  },
  props: {
    showAlarmRecords: {
      type: Boolean,
      default: () => false,
    },
    selectedNotice: {
      type: Object,
      default: () => {},
    },
  },
  emits: ["changeAlarmDialog"],
  setup(props, ctx) {
    const { t } = useI18n();
    let state = reactive({
      isShowDeviceList: true,
      // 表头字段
      haderList: [{
        label: 'SN',
        field: 'sn'
      },{
        label: 'Nickname',
        field: 'name'
      },{
        label: 'Address',
        field: 'address'
      },{
        label: 'Top level',
        field: 'organization_name'
      },{
        label: 'Sublevel',
        field: 'area_name'
      },{
        label: 'Room',
        field: 'room_no'
      },{
        label: 'Online/Offline',
        field: 'status'
      }],
      headerObj: {
        userid: 0,
        token: "",
      },
      searchForm: {
        status: 0,
        expire_status: 0,
        start: "",
        end: "",
        keyword: "",
        dateRange: "",
        page: 1,
        organization_id: 0,
        area_id: 0,
      },
      form: {
        id: 0,
        sn: "",
        name: "",
        organization_id: "",
        section_id: 0,
        lng: "",
        lat: "",
        address: "",
        room_no: "",
        active_at: "",
        expired_at: "",
        fee: "",
        contact_id: "",
        emergency_contact_name: "",
        emergency_contact_mobile: "",
        locked: 0,
        zone: "",
      },
      bindAddressForm: {
        id: 0,
        action: "bindAddress",
        lng: "",
        lat: "",
        address: "",
        room_no: "",
      },
      dialogMapVisible: false,
      dialogFormVisible: false,
      organizationList: [],
      filterOrganizationList: [],
      areaList: [],
      filterAreaList: [],
      zoneList: [],
      deviceList: [],
      tips: [],
      searchCompleted: false,
      total: 0,
      dialogSensorVisible: false,
      selectedDeviceId: 0,
      selectedDevices: [],
      fileList: [],
      permissions: [],
      uploadUrl: import.meta.env["VITE_BASE_URL"] + "/api/device/import",
      filterTotal: 0,
      filterList: [],
      selectedFilters: [],
      filterPage: 1,
      lastPage: 0,
      showChildDeviceList: false,     // 是否展示子设备ID
      showChileDeviceId: '',    // 展开的主机ID
      checkedDeviceList: [],
      selectAll: false, // 全选当前页
    });

    var timer;

    onMounted(() => {
      getDeviceList();
      initList();
      state.permissions = window.menu;
      state.headerObj.userid = window.localStorage.getItem("user_id") || 0;
      state.headerObj.token = window.localStorage.getItem("auth_token") || "";
      state.selectedFilters = [
        {
          name: "All levels",
          selected: true,
          level: 0,
          type: "all",
        },
      ];
    });

    const selectFilter = (item, index = -1) => {
      switch (item.type) {
        case "all":
          state.filterPage = 1;
          initProjectList();
          state.selectedFilters = [
            {
              name: "All levels",
              selected: true,
              level: 0,
              type: "all",
            },
          ];
          state.searchForm.organization_id = 0
          state.searchForm.area_id = 0
          break;
        case "area":
          state.filterPage = 1;
          initProjectAreaList(item.organization_id, item.level + 1);
          state.searchForm.area_id = item.id
          break;
        default:
          state.filterPage = 1;
          initProjectAreaList(item.id, 1);
          state.searchForm.organization_id = item.id
          state.searchForm.area_id = 0

      }
      searchFunc()
      if (index == -1) {
        // 点击卡片，面包屑+1
        state.selectedFilters.forEach(ele => {
          ele.selected = false
        })
        item.selected = true
        state.selectedFilters.push(item);
      } else {
        // 点击面包屑，只保留当前及之前的items
        state.selectedFilters.length = index + 1;
        // console.log(state.selectedFilters[index], "curr");
        state.selectedFilters.forEach(ele => {
          ele.selected = false
        })
        state.selectedFilters[index].selected = true;

      }
    };

    const prevFilter = () => {
      state.filterPage -= 1;
      let obj = state.filterList[state.filterList.length - 1];
      if (obj.type == "area") {
        initProjectAreaList(obj.organization_id, obj.level);
      } else {
        initProjectList();
      }
    };

    const nextFilter = () => {
      state.filterPage += 1;
      let obj = state.filterList[state.filterList.length - 1];
      console.log("obj", obj, state.filterList);
      if (obj.type == "area") {
        initProjectAreaList(obj.organization_id, obj.level);
      } else {
        initProjectList();
      }
    };

    const changeDate = (val) => {
      state.searchForm.start = val[0];
      state.searchForm.end = val[1];
    };
    const searchFunc = () => {
      // 搜索重置为第一页
      state.searchForm.page = 1;
      getDeviceList();
    };

    const getDeviceList = () => {
      state.searchForm.expire_status = parseInt(state.searchForm.expire_status);
      state.searchForm.status = parseInt(state.searchForm.status);

      API.deviceList(state.searchForm).then((res) => {
        state.deviceList = res.data.list;
        state.total = res.data.total;
      });
    };

    // 添加设备
    const add = () => {
      initForm();
      initList();
      state.form.id = null;
      state.form.action = "add";
      state.dialogFormVisible = true;
    };

    // 编辑主机
    const edit = (param) => {
      initForm();
      initList(param.organization_id);
      state.form = param;
      state.form.action = "edit";
      state.dialogFormVisible = true;
    };

    // 删除主机/设备
    const del = (id) => {
      API.handleDevice({ id: id, action: "delete" }).then((res) => {
        if (res.code == 0) {
          ElMessage({
            message: "Delete Success",
            type: "success",
            duration: 3000,
          });
          getDeviceList();
        } else {
          ElMessage.error(res.data);
        }
      });
    };

    const cancel = () => {
      initForm();
      state.dialogFormVisible = false;
    };

    const submitDetail =()=> {
      initForm();
      getDeviceList();
      state.dialogFormVisible = false;
    }

    const initForm = () => {
      state.form = {
        id: 0,
        sn: "",
        name: "",
        organization_id: "",
        section_id: 0,
        lng: "",
        lat: "",
        address: "",
        room_no: "",
        active_at: "",
        expired_at: "",
        fee: "",
        contact_id: "",
        emergency_contact_name: "",
        emergency_contact_mobile: "",
        locked: 0,
        zone: "",
      };
    };

    const initList = (organizationId = 0) => {
      initOrganizationList();
      initAreaList(organizationId);
      initProjectList();
      initZoneList();
    };
    // 获取组织列表
    const initOrganizationList = () => {
      API.organizationList().then((res) => {
        state.organizationList = res.data;
        let empty = {
          id: 0,
          label: "All",
          children: [],
        };
        state.filterOrganizationList = [empty, ...res.data];
      });
    };

    const initProjectList = () => {
      API.organizationTopList({ page: state.filterPage }).then((res) => {
        state.filterList = res.data.list;
        state.filterTotal = res.data.total;
        state.lastPage = Math.ceil(res.data.total / 5);
      });
    };

    const initProjectAreaList = (organizationId, level) => {
      API.areaList({
        organization_id: organizationId,
        level: level,
        page: state.filterPage,
      }).then((res) => {
        state.filterList = res.data.list;
        state.filterTotal = res.data.total;
        state.lastPage = Math.ceil(res.data.total / 5);
      });
    };
    // 获取直辖单位列表
    const initAreaList = (organizationId = 0) => {
      API.settingList({ type: "area", organization_id: organizationId }).then(
        (res) => {
          state.areaList = res.data;
          let empty = {
            id: 0,
            label: "All",
            children: [],
          };
          state.filterAreaList = [empty, ...res.data];
        }
      );
    };

    // 获取时区列表
    const initZoneList = () => {
      API.zoneList().then((res) => {
        state.zoneList = res.data;
      });
    };

    const searchContact = (val, cb) => {
      timer = null;
      timer = setTimeout(() => {
        API.contactList({ keyword: val }).then((res) => {
          let arr = [];
          if (res.data.list && res.data.list.length > 0) {
            res.data.list.forEach((element) => {
              arr.push({
                value: element.name,
                link: element.id,
              });
            });
          }
          cb(arr);
        });
      }, 1500);
    };

    const handleSelectContact = (val) => {
      state.form.contact_id = val.link;
    };

    const lockDevice = (val) => {
      state.form.locked = val;
    };

    // 展示绑定地址弹窗
    const bindAddress = (row) => {
      state.bindAddressForm.id = row.id;
      state.bindAddressForm.address = row.address;
      state.bindAddressForm.lng = row.lng;
      state.bindAddressForm.lat = row.lat;

      state.dialogMapVisible = true;
    };

    // 关闭绑定主机地址弹窗
    const cancelBindAddress = () => {
      initBindAddressForm();
      state.dialogMapVisible = false;
    };

    // 初始化绑定主机地址弹窗数据
    const initBindAddressForm = () => {
      state.bindAddressForm.id = 0;
      state.bindAddressForm.address = "";
      state.bindAddressForm.lng = "";
      state.bindAddressForm.lat = "";
      state.bindAddressForm.room_no = "";
    };

    // 绑定成功处理
    const bindAddressSuccess = () => {
      state.dialogMapVisible = false;
      initBindAddressForm();
      getDeviceList();
    }

    const importSuccess = () => {
      ElMessage.success("Success");
      state.fileList = [];
    };

    const showSensor = (id) => {
      state.selectedDeviceId = id;
      state.dialogSensorVisible = true;
    };

    const closeDialog = () => {
      state.selectedDeviceId = 0;
      state.dialogSensorVisible = false;
    };

    const downloadTemplate = () => {
      API.importTemplate().then((res) => {
        if (res.code == 0) {
          window.open(res.data);
        }
      });
    };

    // 翻页
    const changePage = (page) => {
      state.searchForm.page = page;
      getDeviceList();
    };

    const selectOrganization = (item) => {
      initAreaList(item);
      state.searchForm.area_id = "";
      searchFunc();
    };

    const selectArea = (item) => {
      searchFunc();
    };

    const selectDevice = (row) => {
      state.selectedDevices = [];
      if (row.length > 0) {
        row.forEach((element) => {
          state.selectedDevices.push({
            id: element.id,
            can_active: element.can_active,
            license_active: element.license_active,
          });
        });
      }
    };

    const active = (id) => {
      API.activeDevice({ id: id }).then((res) => {
        if (res.code == 0) {
          ElMessage.success("Active Device Success");
          getDeviceList();
        } else {
          ElMessage.error("Active Device Error");
        }
      });
    };

    const activeAll = () => {
      if(state.selectAll){
        state.selectedDevices = state.deviceList
      }
      if (state.selectedDevices.length == 0) {
        ElMessage.error("Please select devices");
        return;
      }
      state.selectedDevices.forEach((item) => {
        if (item.can_active == 1 && item.license_active == 0) {
          state.selectedDevices = [];
          setTimeout(() => {
            active(item.id);
          }, 1000);
        }
      });
    };

    const delAll = () => {
      if(state.selectAll){
        state.selectedDevices = state.deviceList
      }
      if (state.selectedDevices.length == 0) {
        ElMessage.error("Please select devices");
        return;
      }
      state.selectedDevices.forEach((item) => {
        if (item.can_active == 1 && item.license_active == 0) {
          state.selectedDevices = [];
          setTimeout(() => {
            del(item.id);
          }, 1000);
        }
      });
    };

    const backToDeviceList = () => {
      ctx.emit("changeAlarmDialog", {}, false);
    };

    // 展开子设备列表
    const handleShowChileDevice = (id) => {
      state.showChileDeviceId = id
      state.showChildDeviceList = true
    }
    // 隐藏子设备列表
    const handleHideChileDevice = () => {
      state.showChileDeviceId = ''
      state.showChildDeviceList = false
    }

    // 修改选中设备列表
    const checkedDataprocessing = () => {
      let list = state.deviceList.filter(item => {
        return item.checked
      })
      state.selectedDevices = list
    }

    watch(
      () => props.showAlarmRecords,
      (val) => {
        state.isShowDeviceList = true;
        // 暂时不跳转二级页面
        // state.isShowDeviceList = !val;
        console.log("selectedNotice", props.selectedNotice);
      }
    );
    return {
      t,
      active,
      activeAll,
      cancel,
      add,
      edit,
      searchContact,
      handleSelectContact,
      searchFunc,
      changeDate,
      del,
      delAll,
      lockDevice,
      bindAddress,
      bindAddressSuccess,
      cancelBindAddress,
      importSuccess,
      showSensor,
      closeDialog,
      downloadTemplate,
      changePage,
      selectOrganization,
      selectArea,
      selectDevice,
      backToDeviceList,
      selectFilter,
      prevFilter,
      nextFilter,
      submitDetail,
      handleShowChileDevice,
      handleHideChileDevice,
      checkedDataprocessing,
      ...toRefs(state),
      Search,
    };
  },
};
</script>

<style lang="scss" scoped>
.pb-10 {
  padding-bottom: 10px;
}
.mb-5 {
  margin-bottom: 5px;
}
:deep(.el-form) {
  padding: 10px;
}
:deep(.el-col) {
  display: flex;
  justify-content: flex-start;
  align-items: center;
}
:deep(.el-checkbox) {
  box-sizing: border-box;
  height: 46px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 10px 5px;
}
.filter_box {
  flex-wrap: nowrap;
  overflow-x: scroll;
  width: 90%;
  margin: 0 auto;
}
.flex_start{
  flex-wrap: nowrap;
}

.btn_box {
  margin: 0 10px;
}
.condition {
  margin-top: 4vh;
}

.card-1 {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(90deg, #A490C3 0%, #8388C2 100%);
  border-radius: 5px;
}

.card-2 {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(90deg, #77B2D2 0%, #56BCA8 100%);
  border-radius: 5px;
}

.card-3 {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(90deg, #D96392 0%, #DC687D 100%);
  border-radius: 5px;
}

.card-4 {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(90deg, #FF7E6D 0%, #F15B25 100%);
  border-radius: 5px;
}

.card-5 {
  color: #fff;
  text-align: center;
  cursor: pointer;
  background: linear-gradient(90deg, #6082D7 0%, #67A6BA 100%);
  border-radius: 5px;
}

.mt-20 {
  margin-top: 20px;
}

.data_table {
  box-sizing: border-box;
  position: relative;
  border-radius: 20px;
  border:1px solid #9c9c9c;
  margin: 0 20px;
  overflow-x: scroll;
  height: 50vh;
  background-color: #fff;


  .row{
    width: fit-content;
  }
  .header {
    position: -webkit-sticky;
    position: sticky;
    top: 0px;
    font-size: 18px;
    line-height: 55px;
    text-align: center;
    color: #333;
    background-color: #fff;
    z-index: 10;

    .font {
      background-color: #fff;
      display: block;
    }
  }
  .data_list {
    min-height: 46px;
    font-size: 14px;
    color: #000;
    line-height: 1;
    text-align: center;
  }
  .child_list {
    padding: 10px 0;
    transform: all 99s;
    align-items: flex-end;
    font-size: 14px;
    text-align: center;
    &>div{
      min-height: 40px;
      line-height: 1;
      border-bottom: 1px solid #9c9c9c;
    }
  }
  .ml_40 {
    margin-left: 40px;
  }
  .width_40 {
    flex: 0 0 40px;
    width: 40px;
  }
  .width_170 {
    flex: 0 0 170px;
    width: 170px;
  }
  .width_200 {
    flex: 0 0 200px;
    width: 200px;
  }
  .width_320 {
    flex: 0 0 320px;
    width: 320px;
  }

  .flex_end {
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .sn {
    width: 140px;
    text-align: center;
  }

  .el-icon {
    cursor: pointer;
  }

}

</style>
